<template>
  <view class="my-search-container">
    <view class="search-box">
      <!-- 搜索框的基本用法 -->
      <uni-search-bar v-model="value" :radius="100" @input="input" cancelButton='none'></uni-search-bar>
    </view>
    <!-- 搜索列表 -->
    <view class="sugg-list" v-if="searchValue.length !== 0">
      <view class="sugg-item" v-for="(item,index) in searchList" :key="index" @click="searchId(item.goods_id)">
        <view class="goods-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="his-list" v-else>
      <view class="his-title">
        <view>搜索历史</view>
        <uni-icons type="trash" size="16" @click="clearHistory"></uni-icons>
      </view>
      <view class="his-item">
        <uni-tag :text="item" v-for="(item,i1) in histres" :key='i1' @click="goToHistoryList(item)"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchValue: '',
        timer: null, //控制防流防抖
        searchList: [],
        historyList: [],
        value:''
      };
    },
    methods: {
      input(e) {
        // 防抖和节流，通过延时器来处理，发起数据请求的次数
        clearTimeout(this.timer) // 清楚延时器
        this.timer = setTimeout(() => { // 接收延时器返回的数据
          this.searchValue = e
          this.getSearchList()
          // console.log(this.searchValue)
        }, 500)
        // console.log(this.timer)
      },
      // 获取搜索建议列表
      async getSearchList() {
        if (this.searchValue.length === 0) {
          this.searchList = []
          return
        }
        const {
          data: res
        } = await uni.$http.get('/goods/search', {
          query: this.searchValue
        })
        // console.log(res)
        if (res.meta.status !== 200) return uni.$showMsg()
        // 获取到搜索建议列表
        this.searchList = res.message.goods
        // 记录搜索内容，存储到搜索历史中
        this.getSearchHistory()
      },
      // 获取搜索历史内容
      getSearchHistory() {
        // 从数据前面开始添加
        // this.historyList.unshift(this.searchValue)
        this.historyList.push(this.searchValue)
        this.saveHistoryList()
      },
      // 点击列表项获取id
      searchId(val) {
        uni.navigateTo({
          'url': '/subpkg/goods_detail/goods_detail?goods_id=' + val
        })
        // this.searchValue=null
        // this.searchList = []
        // console.log(val)
      },
      // 数组的去重，set方法
      saveHistoryList() {
        // 1.将 arr数组转换为，set对象
        const set = new Set(this.historyList)
        // 2. 调用 Set 对象的 delete 方法，移除对应的元素
        set.delete(this.searchValue)
         // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
        set.add(this.searchValue)
        // 4. 将 Set 对象转化为 Array 数组
          this.historyList = Array.from(set)
          
          // 对数组进行持久化存储 第一个参数是键，第二个是值,将数组转化为字符串
          uni.setStorageSync('SV',JSON.stringify(this.historyList))
      },
      // 清空搜索历史
      clearHistory(){
        this.historyList=[]
        // 清空本地存储中的数据
        uni.setStorageSync('SV','[]')
      },
      // 点击搜索历史列表，跳转的商品列表页面
      goToHistoryList(val){
        // console.log(val)
        // 点击搜索历史，跳转到搜索列表页面
        // this.value=val
        // this.getSearchList()
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query=' + val
        })
      }
    },
    // 监听页面刚加载
    onLoad() {
      // 获取客户端存储的数据,并复制给搜索历史记录列表
      this.historyList=JSON.parse(uni.getStorageSync('SV') || '[]')
    },
    computed: {
      histres() {
        // 计算属性，数组的反转, 这样做不改变原数组
        return [...this.historyList].reverse()
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    background-color: #c00000;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    padding: 0 5px;

  }

  .sugg-item {
    // padding: ;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    border-bottom: 1px solid #efefef;
  }

  .goods-name {
    white-space: nowrap; // 文本不换行
    overflow: hidden; // 超出部分隐藏
    text-overflow: ellipsis; // 超出文本，使用 ...代替
  }

  .his-list {
    padding: 0 5px;

    .his-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 40px;
      font-size: 13px;
      border-bottom: 1px solid #efefef;
    }

    .his-item {
      .uni-tag {
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }
</style>
